<template>
	<view class="content">
		<view v-if="gameList.length>0" 
		class="cards" 
		v-for="(item,index) in gameList" :key="index">
			<image class="game-img" :src="imgUrl+item.imgUrl" mode="aspectFill"></image>
			<view class="game-btn" @click="toPage(item)">{{item.gameName}}</view>
			<!-- <view class="game-text">{{item.content}}</view> -->
			<!-- <view class="game-btn" @click="toPage(item)">进入游戏</view> -->
		</view>
		<view v-if="gameList.length==0" class="none">
			暂无游戏
		</view>
	</view>
</template>

<script>
	import {
		uniGetToken
	} from '@/utils/common.js'
	import config from '@/config';
	import {gameSettingList} from '@/api/index.js'
	export default {
		data() {
			return {
				imgUrl:config.uploadUrl,
				gameList: []
			};
		},

		methods: {
			async getList(){
				let res = await gameSettingList()
				this.gameList = res.data.filter(item => item.status == 1);
			},
			toPage(item) {
				let token = uniGetToken()
				let obj = {
					token:token,
					pagodaUrl:item.pagodaUrl,
					apiUrl:item.apiUrl,
					sockUrl:item.sockUrl
				}
				let objs = JSON.stringify(obj);
				if (item.address) {
					let url = item.address + '?data='+encodeURIComponent(objs)
					uni.navigateTo({
						url
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂未开放'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.cards{
		width: 338rpx;
		min-height: 300rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		// border: 1rpx solid #2D3A4C;
		border-radius: 15rpx;
		position: relative;
	}
	.none{
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #FFFFFF;
		opacity: 0.8;
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 30rpx;
		margin-bottom: 100rpx;
	}

	.game-list {
		padding: 30rpx;
	}

	.game-img {
		width: 100%;
		height: 300rpx;
		display: block;
		border-radius: 20rpx;
	}

	.game-tit {
		font-size: 32rpx;
		font-weight: 600;
		margin: 10rpx 0;
		color: #e5e7eb;
	}

	.game-text {
		// height: 100rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #9ca3af;
	}

	.game-btn {
		background-color: #2563eb;
		padding: 16rpx;
		border-radius: 20rpx;
		color: #e2e8f0;
		font-weight: 500;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	
	}
</style>